<template>
  <div class="add-address">
    <top-header :isLeft="true" title="新建地址"></top-header>
    
    <div class="content">
      <a-form-model ref="ruleForm" :model="tempAddress" :rules="rules">
      <a-form-model-item label="收货人" prop="user_name">
      <a-input  v-model="tempAddress.user_name"/>
      </a-form-model-item>
      <a-form-model-item label="手机号" prop="user_phone">
      <a-input  v-model="tempAddress.user_phone"/>
      </a-form-model-item>
      <a-form-model-item label="收货地址" prop="address_location">
      <a-input
              @click="selectLocation"
              v-model="tempAddress.address_location"
            >
              <a-tooltip slot="suffix" title="选择地址" @click="selectLocation">
                <span style="color:#FF6347">选择地址</span>
                <a-icon style="color:#FF6347" type="environment" />
              </a-tooltip>
            </a-input>
      </a-form-model-item >
      <a-form-model-item label="门牌号">
      <a-input  v-model="tempAddress.address_doorplate"/>
      </a-form-model-item >
      <a-form-model-item label="标签">
       <a-radio-group default-value="1" v-model="tempAddress.label">
              <a-radio-button value="0">
                家
              </a-radio-button>
              <a-radio-button value="1">
                父母家
              </a-radio-button>
              <a-radio-button value="2">
                公司
              </a-radio-button>
               <a-radio-button value="3">
                学校
              </a-radio-button>
               <a-radio-button value="4">
                其他
              </a-radio-button>
            </a-radio-group>
      </a-form-model-item >
       <a-form-model-item>
          <a-button style="background-color:#FF6347" type="primary" block shape="round" @click="onSubmit">
            保存并使用
          </a-button>
        </a-form-model-item>
      </a-form-model>   
</div>
  </div>

</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  data() {
    return {
      rules: {
        user_name: [
          { required: true, message: "请填写姓名", trigger: "blur" },
          { min: 2, max: 5, message: "请输入正确姓名", trigger: "blur" },
        ],
        user_phone: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
        ],
      },
    }
  },
  computed:{
     tempAddress(){
        return this.$store.getters.tempAddress;
      }
  },
  components: {
    TopHeader,
  },
  methods: {
    
     onSubmit(e) {
       var self = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 验证通过的逻辑
          //把数据加到用户个人信息里的common_address里
          self.$store.dispatch('setCommonAddress',this.tempAddress);
          //把界面跳转到Address页面
          self.$router.push({name:'Address'});
        } else {
          return false;
        }
      });
    },
    selectLocation() {
        //把页面跳转到选择地址页面
      this.$router.push({name:'AddressSelect'});
    },
    },
   
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 70%;
  padding: $common-padding;
}
</style>